<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript">
	$(function(){
		// 장르 설정 정보 가져오기
		var tempGenre = ${initParam.genre};
		var arrGenre = tempGenre.split(',');
		// 장르 초기화
		for(i=0; i<arrGenre.length; i++){
			$(":input[name=genre]").append("<option>"+arrGenre[i]+"</option>");
		}
		
		var fileKind = "";
		
		$("#writeForm").submit(function(){
			if(!$(":input[name=title]").val()){
				alert("제목을 입력하세요");
				return false;
			}
			
			if(!$(":input[name=genre]").val()){
				alert("장르를 선택하세요");
				return false;
			}
			
			if(!$(":input[name=uploadFile]").val()){
				alert("음악파일을 등록하세요");
				return false;
			}
		})
		
		$("#writeCancelBtn").click(function(){
			if(confirm("작성취소하시겠습니까?")){
			location.href=${initParam.root}+"musicboard_pagingContent.ju?nowPage=1";
			}
		});
		
	});//ready
	
	function checkExtension(fileObj){
		var filePath = fileObj.value;
		var fileName = filePath.substring(filePath.lastIndexOf("\\")+1);
		fileKind = fileName.split(".")[1];
		
		if(fileKind != "mp3"){
			alert("mp3 파일만 등록가능합니다.")
			$("#inputFile").val("");
		}
	}
</script>
<div class="well">
	<form method="post" action="musicboard_writeContent.ju" id="writeForm" class="form-horizontal" enctype="multipart/form-data">
	  <fieldset>
	    <legend>음악게시판 글쓰기</legend>
	    
	    <div class="form-group">
	      <label for="inputTitle" class="col-lg-2 control-label">제목</label>
	      <div class="col-lg-10">
	        <input type="text" class="form-control" id="inputTitle" placeholder="Title" name="title">
	      </div>
	    </div>
	    
	    <div class="form-group">
	      <label for="select" class="col-lg-2 control-label">장르</label>
	      <div class="col-lg-10">
	        <select class="form-control" id="select" name="genre">
	        </select>
	        <span class="text-primary">음악과 어울리는 장르를 선택해주세요.</span>
	      </div>
	    </div>
	    
	    <div class="form-group">
		  <label class="col-lg-2 control-label">음악파일</label>
		  <div class="col-lg-10">
		    <input type="file" class="form-control" onchange="checkExtension(this)" name="uploadFile" accept="audio/mp3">
		    <div class="alert alert-dismissable alert-warning">
			  <h4>Warning!</h4>
			  <p>mp3 파일만 업로드 가능합니다.</p>
			</div>
		  </div>
		</div>
		
		<div class="form-group">
		  <label class="col-lg-2 control-label">이미지파일</label>
		  <div class="col-lg-10">
		    <input type="file" class="form-control" name="uploadPictureFile" accept="image/*">
		    <div>
			  <p class="text-primary">음악을 대표하는 사진을 올려주세요.</p>
			</div>
		  </div>
		</div>
	
	    <div class="form-group">
	      <label for="textArea" class="col-lg-2 control-label">내용</label>
	      <div class="col-lg-10">
	        <textarea class="form-control" rows="5" id="textArea" name="content"></textarea>
	      </div>
	    </div>
	    
	    <div class="form-group">
	      <div class="col-lg-10 col-lg-offset-2">
	        <button type="button" class="btn btn-default" id="writeCancelBtn">취소</button>
	        <button type="submit" class="btn btn-primary">등록</button>
	      </div>
	    </div>
	    
	  </fieldset>
	  
	  <input type="hidden" name="pictureFile" value="no_albumart.png">
	  <input type="hidden" name="memberVO.id" value=${sessionScope.mvo.id }>
	</form>
</div>